<head>
    <title>SSH</title>
    <link href="/static/css/xterm.min.css" rel="stylesheet" type="text/css"/>
    <style>
        #terms {
            width: 80%;
        }
    </style>
</head>
<div style="margin-left: 4%">
    <div>
        <form class="layui-form" id="editFrom" style="margin-bottom: 20px">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 380px;min-height: 36px">
                    <select name="host" lay-verify="required" id="host">
                        <option value=""></option>
                        {{range .Hosts}}
                            <option value="{{.Id}}">{{.Hostname}}</option>
                        {{end}}
                    </select>
                </div>
                <button id="connect" style="width: 110px" type="button" class="layui-input-inline layui-btn layui-btn-primary ">连接</button>
            </div>
        </form>

    </div>
    {{if .HostId}}
        <div id="HostId" class="val" val="{{.HostId}}"></div>
    {{else}}
        <div id="HostId"></div>
    {{end}}
    <div id="terms"></div>
</div>

<script src="/static/js/xterm.min.js"></script>
<script>
    var socket;
    var term;
    var isInit = $("#HostId").hasClass("val");
    layui.use('form', function() {
        if (isInit) {
            $("#host").val($("#HostId").attr("val"));
            layui.form.render();
            $('button#connect').click()
        }
    });

    $('button#connect').click(function() {
        if (socket !== undefined && socket.readyState === socket.OPEN){
            socket.close();
        }
        var hostId = $("#host").val();
        socket = new WebSocket('ws://' + window.location.host + '/ws/ssh/' + hostId + "?cols=800&rows=40");

        socket.onopen = function () {
            term = new Terminal({
                cols: 800,
                rows: 40,
                cursorBlink: true,
                tabStopWidth: 4
            });
            term.open(document.getElementById('terms'));

            term.on('data', function (data) {
                socket.send(data);
            });
            // term.on('resize', function (size) {
            //     socket.send(JSON.stringify({
            //         type: "resize",
            //         rows: size.rows,
            //         cols: size.cols,
            //     }));
            // });

            socket.onmessage = function (msg) {
                term.write(msg.data);
            };
            socket.onerror = function (e) {
                layer.msg("connect error");
                console.log(e);
            };

            socket.onclose = function (e) {
                layer.msg("connect close");
                term.destroy();
            };
        };
    });

</script>